<template>
  <div class="map-search-panel">
    <el-autocomplete
      ref="input"
      size="small"
      class="full-width"
      placeholder="请输入地点定位"
      v-model="keyword"
      @keyup.enter.native="skipToLocation()"
      :fetch-suggestions="searchCoordinatesByKeyword"
      @select="skipToLocation"
      :trigger-on-focus="false"
      :popper-class="allPopClass"
    >
      <el-select
        v-model="region"
        slot="prepend"
        placeholder="请选择"
        v-if="filterable"
        :popper-class="allPopClass"
      >
        <el-option
          v-for="item in regions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-input
        slot="prepend"
        v-model="region"
        placeholder="请输入城市名"
        v-else
        style="width: 120px;"
      />
      <el-button
        slot="append"
        icon="el-icon-search"
        class="one-photo-button"
      />
      <template #default="{ item }">
        <div class="d-flex ai-c">
          <div class="d-flex-c m-t-mini overflow-hidden">
            <span
              class="f-16 text-ellipsis"
              :title="item.name"
              style="line-height: 1;"
            >{{ item.name }}</span>
            <span
              class="text-ellipsis notes"
              :title="item.desc"
            >{{ item.desc }}</span>
          </div>
        </div>
      </template>
    </el-autocomplete>
  </div>
</template>

<script>
import { transformGCJ2WGS } from './transform'
import { mapSearch } from '@/api/essential/map.js'

export default {
  name: 'SearchPanel',
  data () {
    return {
      region: '',
      keyword: '',
      searchResult: []
    }
  },
  props: {
    isGlobal: {
      type: Boolean,
      default: true
    },
    regions: {
      type: Array,
      default: () => []
    },
    filterable: {
      type: Boolean,
      default: false
    },
    extendPopClass: {
      type: String,
      default: ''
    }
  },
  computed: {
    allPopClass () {
      return 'map-search-panel-popup ' + this.extendPopClass
    }
  },
  created () {
    this.region = this.filterable ? this.regions[0].value : ''
  },
  methods: {
    focus () {
      this.$refs.input.focus()
    },
    // 根据关键字查询经纬度
    async searchCoordinatesByKeyword (keyword, callback) {
      try {
        const data = await mapSearch({
          keyword,
          region: this.region
        })
        this.searchResult = data.map(item => ({
          name: item.name,
          location: item.location,
          address: item.name + `(${item.cityname + item.address})`,
          img: item.photos[0]?.url || '',
          desc: item.cityname + item.adname
        }))
        callback(this.searchResult)
      } catch (error) {
        console.error(error)
        this.searchResult = []
        callback(this.searchResult)
      }
    },
    // 根据行政区划定位地图
    async skipToLocation (item) {
      item = item ?? this.searchResult[0]
      if (!item) return
      const arr = item.location.split(',')
      const result = transformGCJ2WGS(parseFloat(arr[0]), parseFloat(arr[1]))
      const location = [result.lon, result.lat]
      if (this.isGlobal) {
        await this.$mapManager.invoke('setCenterAndZoom', location)
        this.$mapManager.getMapComponent().map1.tipsPopup.show(location, `<div>${item.address || item.name}</div>`)
      } else {
        this.$emit('confirmLocate', location, item)
      }
    },
    reset () {
      this.keyword = ''
    }
  }
}
</script>

<style lang="scss" scoped>
$bgColor: rgba($color: #fff, $alpha: 0.8);
$textColor: #424e61;

.map-search-panel {
  position: absolute;
  z-index: 1;
  top: 0;
  width: 400px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  ::v-deep {
    .el-input-group__append {
      width: 32px;
      height: 32px;
      background: $bgColor;
      padding-right: 11px;
      border-color: #b7b9bb;

      .el-button {
        padding: 9px 8px;

        > i {
          color: $textColor;
        }
      }
    }

    .el-input__inner {
      background: $bgColor;
      color: $textColor;
      border-color: #b7b9bb;

      &::placeholder {
        transform: translateY(1px);
      }
    }

    .el-input-group__prepend {
      background: $bgColor;
      padding: 0 !important;
      border: none !important;

      .el-select {
        width: 90px;

        .el-input {
          .el-input__inner,
          .el-select__caret {
            color: $textColor;
          }
        }
      }
    }
  }
}
</style>

<style lang="scss">
.map-search-panel-popup.el-popper {
  background: rgba($color: #fff, $alpha: 0.8);
  border-color: #b7b9bb;
  margin-top: 10px;
  overflow: hidden;

  .el-scrollbar__view {
    padding: 0;
  }

  .el-select-dropdown__item,
  .el-select-dropdown__item.selected,
  .el-select-dropdown__item.hover,
  .el-dropdown-menu__item,
  .el-dropdown-menu__item:hover,
  .el-autocomplete-suggestion__list > li {
    color: #424e61;

    & .notes {
      color: #b7b9bb;
    }
  }

  .el-select-dropdown__item.selected,
  .el-select-dropdown__item.hover,
  .el-dropdown-menu__item:hover,
  .el-autocomplete-suggestion__list > li:hover,
  .el-autocomplete-suggestion__list > li.highlighted {
    background: linear-gradient(0deg, #0091ffdb, #028df7);
    // background: #fff;
    color: #fff;

    & .notes {
      color: #fff;
    }
  }

  .popper__arrow {
    display: none;
  }

  .el-autocomplete-suggestion__wrap {
    padding: 0;
  }
}
</style>
